<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交非受控组件</title>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script src="./js/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
       class Abc extends React.Component{

        handleSubmit=(event)=>{
           event.preventDefault()
            const {username,password} = this
            alert(`用户名:${username.value},密码：${password.value}`)
        }


           render(){
               return (
                   <form action="https://www.baidu.com" onSubmit={this.handleSubmit}>
                       用户名:<input ref={c=>this.username=c} type="text"/>
                       密码:<input type="password" ref={c=>this.password=c}/>
                       <button>登录</button>
                   </form>
               )
           }
       }
        ReactDOM.render(<Abc/>,document.getElementById('app'))




    </script>
</body>
</html>
